const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const postcssAspectRatioMini = require('postcss-aspect-ratio-mini');
const postcssPxToViewport = require('postcss-px-to-viewport');
const postcssWriteSvg = require('postcss-write-svg');
const postcssCssnext = require('postcss-cssnext');
const postcssViewportUnits = require('postcss-viewport-units');
const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano');

function resolvePath(name) {
    return path.resolve(__dirname, name)
}

module.exports = {
    mode: 'development',
    devServer: {
        open: true,
        compress: true
    },
    entry: {
        app: "./src/index.jsx"
    },
    output: {
        filename: '[name].[hash].js',
        path: resolvePath('../dist')
    },
    module: {
        rules: [{
                test: /.jsx?$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'babel-loader?cacheDirectory=true'
                    }
                ]
            },{
            test: /\.css$/,
            use: [
                require.resolve('style-loader'),
                {
                    loader: require.resolve('css-loader'),
                    options: {
                        importLoaders: 1,
                    }
                },
                {
                    loader: require.resolve('postcss-loader'),
                    options: {
                        ident: 'postcss',
                        plugins: () => [
                            require('postcss-flexbugs-fixes'),
                            autoprefixer({
                                browsers: [
                                    '>1%',
                                    'last 4 versions',
                                    'Firefox ESR',
                                    'not ie < 9',
                                ],
                                flexbox: 'no-2009'
                            }),

                            postcssAspectRatioMini({}),
                            postcssPxToViewport({
                                viewportWidth: 750, // (Number) The width of the viewport.
                                viewportHeight: 1334, // (Number) The height of the viewport.
                                unitPrecision: 3, // (Number) The decimal numbers to allow the REM units to grow to.
                                viewportUnit: 'vw', // (String) Expected units.
                                selectorBlackList: ['.ignore', '.hairlines'], // (Array) The selectors to ignore and leave as px.
                                minPixelValue: 1, // (Number) Set the minimum pixel value to replace.
                                mediaQuery: false // (Boolean) Allow px to be converted in media queries.
                            }),
                            postcssWriteSvg({
                                utf8: false
                            }),
                            postcssCssnext({}),
                            postcssViewportUnits({}),
                            cssnano({
                                preset: "advanced",
                                autoprefixer: false,
                                "postcss-zindex": false
                            })
                        ]
                    }
                }
            ]
        }]
    },
    resolve: {
        extensions: [
            '.js', '.jsx'
        ],
        alias: {
            'common': resolvePath('../common')
        }
    },
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: './src/index.html'
        })
    ]
}
